<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-row justify="center" type="flex">
            <el-col :span="12">
              <div style="height: auto">
                <div style="display: inline-block">
                  <img alt="" src="static/img/wangdian.png" style="height: 67px;width: 67px">
                </div>
                <div class="div-right">
                  <div>{{ data.orgName }}</div>
                  <div style="color: rgba(138,138,138,0.56)">{{ data.orgName }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple " style="height: 70px">
                <div class="div-right">
                  <div class="first-div">{{data.orgSonNum}}</div>
                  <div class="second-div">下属机构</div>
                </div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple" style="height: 70px">
                <div class="div-right">
                  <div class="first-div">{{ data.orgUserNum }}</div>
                  <div class="second-div">系统员工</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-row justify="center" type="flex">
            <el-col :span="7">
              <div class="grid-content bg-purple" style="height: auto">
                <div class="card-im">
                  <img alt="" src="static/img/daiban.png" style="height: 47px;width: 47px">
                </div>
                <div class="div-left">
                  <div class="card-left">{{ data.orgUserFanWeiNum }}</div>
                  <div class="card-right">待分配作业范围</div>
                </div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple" style="height: 70px">
                <div class="card-im">
                  <img alt="" src="static/img/qujian.png" style="height: 47px;width: 47px">
                </div>
                <div class="div-left">
                  <div class="card-left">{{ data.orgUserGetTaskNum }}</div>
                  <div class="card-right">取件待分配</div>
                </div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple" style="height: 70px">
                <div class="card-im">
                  <img alt="" src="static/img/wuliu.png" style="height: 47px;width: 47px">
                </div>
                <div class="div-left">
                  <div class="card-left">{{ data.orgUserSendTaskNum }}</div>
                  <div class="card-right">派件待分配</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple second">
          <div class="el-card__header1">
            <div class="header1"><span>订单总量</span></div>
          </div>
          <div class="el-card__body1">
            <column-chart/>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple second">
          <div class="el-card__header1">
            <div class="header1"><span>订单分布</span></div>
          </div>
          <div class="el-card__body1">
            <scatter-chart ref="data1"/>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple third">
          <div class="el-card__header1">
            <div class="header1"><span>作业信息</span></div>
          </div>
          <div class="el-card__body">
            <el-col :span="12" class="el-card__body2">
              <el-row>
                <el-col :span="5">
                  <div class="grid-content1">
                    <el-row class="daiba">
                      <el-col :span="24">
                        <router-link to="/index/pieChartFirst" replace="replace">
                          <div style="height: 70px">
                            <div class="div-left">
                              <div class="card-left">{{ data.getTaskSum }}</div>
                              <div style="color: black">取件任务</div>
                            </div>
                          </div>
                        </router-link>
                      </el-col>
                    </el-row>
                    <el-row class="daiba">
                      <el-col :span="24">
                        <router-link to="/index/pieChartSecond" replace="replace">
                          <div style="height: 70px">
                            <div class="div-left">
                              <div class="card-left">{{ data.getTaskMavenSum }}</div>
                              <div style="color: black">仓库任务</div>
                            </div>
                          </div>
                        </router-link>
                      </el-col>
                    </el-row>
                    <el-row class="daiba">
                      <el-col :span="24">
                        <router-link to="/index/pieChartThird" replace="replace">
                          <div style="height: 70px">
                            <div class="div-left">
                              <div class="card-left">{{ data.sendTaskSum }}</div>
                              <div style="color: black">派件任务</div>
                            </div>
                          </div>
                        </router-link>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content3">
                    <el-row class="daiba">
                      <el-col :span="24">
                        <div style="height: 70px;">
                          <div class="div-left">
                            <div class="fontcolor">{{ data.getTaskNumStatusOne }}</div>
                            <div>取件任务待派遣</div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row class="daiba">
                      <el-col :span="24">
                        <div style="height: 70px">
                          <div class="div-left">
                            <div class="fontcolor">{{ data.getTaskMavenStatusOne }}</div>
                            <div>已出库</div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row class="daiba">
                      <el-col :span="24">
                        <div style="height: 70px">
                          <div class="div-left">
                            <div class="fontcolor">{{ data.sendTaskSumStatusOne }}</div>
                            <div>派件任务待派遣</div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content3">
                    <el-row class="daiba">
                      <el-col :span="24">
                        <div style="height: 70px;">
                          <div class="div-left">
                            <div class="fontcolor">{{ data.getTaskNumStatusTwo }}</div>
                            <div>取件任务已派遣</div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row class="daiba">
                      <el-col :span="24">
                        <div style="height: 70px">
                          <div class="div-left">
                            <div class="fontcolor">{{ data.getTaskMavenStatusTwo }}</div>
                            <div>已入库</div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row class="daiba">
                      <el-col :span="24">
                        <div style="height: 70px">
                          <div class="div-left">
                            <div class="fontcolor">{{ data.sendTaskSumStatusTwo }}</div>
                            <div>派件任务未完成</div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content2">
                    <el-row class="daiba">
                      <el-col :span="24">
                        <div style="height: 70px;">
                          <div class="div-left">
                            <div class="fontcolor">{{ data.getTaskNumStatusThree }}</div>
                            <div>取件任务已完成</div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row class="daiba">
                      <el-col :span="24">
                        <div style="height: 70px">
                          <div class="div-left">
                            <div class="fontcolor"></div>
                            <div></div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row class="daiba">
                      <el-col :span="24">
                        <div style="height: 70px">
                          <div class="div-left">
                            <div class="fontcolor">{{ data.sendTaskSumStatusThree }}</div>
                            <div>派件任务已完成</div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <div class="el-card__body3">
                <router-view/>
              </div>
            </el-col>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import scatterChart from "../components/Chart/scatterChart";
import columnChart from "../components/Chart/columnChart";
import loginAPI from "../api/basicfunction/basiclogin/loginAPI";

export default {
  name: 'Header',
  components: {
    scatterChart,
    columnChart
  },
  data() {
    return {
      data: {}
    }
  },
  methods: {
    getAll() {
      loginAPI.getData().then(({data}) => {
        this.data = data.data
        this.$refs.data1.All(data.data.orderAddress)
      })
    }
  },
  created() {
    this.getAll();
  }
}
</script>

<style scoped>
.bg-purple-dark {
  background: #ffffff;
}

.bg-purple {
  background: #ffffff;
}

.bg-purple-light {
  background: #292d3e;
}

.grid-content {
  border-radius: 1rem;
  padding: 10px 0px;
}

.grid-content1 {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: auto;
  padding: 2rem 0px;
}

.grid-content2 {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #e3e3e3;
  height: auto;
  padding: 2rem 0px;
}

.grid-content3 {
  background-color: #e3e3e3;
  height: auto;
  padding: 2rem 0px;
}

.row-bg {
  padding: 10px 0;
  background-color: #ffffff;
}

.header1 {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333;
}

.el-card__header1 {
  padding: 16px 18px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.el-card__body {
  height: 344px;
}

.el-card__body1 {
  padding: 30px;
}

.el-card__body2 {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: linear-gradient(to right, #ffffff, #e3e3e3);
}

.el-card__body3 {
  padding: 30px;
}

.card-im {
  display: inline-block;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 15px;
}

.div-right {
  display: inline-block;
  position: absolute;
  top: .6rem;
  margin-left: 1rem
}

.div-left {
  display: inline-block;
  position: absolute;
  top: .6rem;
  margin-left: 1rem;
}

.card-right {
  font-size: 14px;
  color: #999;
}

.card-left {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 700;
  color: #f04b30;
}

.first-div {
  text-align: center;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 700;
  color: #3681ff;
}

.second-div {
  font-size: 14px;
  width: 60px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999;
}

.first {
  height: 86px;
}

.second {
  height: 340px;
  margin-top: 20px;
}

.third {
  height: 403px;
  margin-top: 20px;
}

.daiba {
  margin-left: 15px;
}

.fontcolor {
  color: #3681ff;
}
</style>

